<template>
<div class="app-container">
  <!--工具栏-->
  <div class="head-container">
    <div v-if="crud.props.searchToggle">
    <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <rrOperation/>
    </div>
    <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
    <crudOperation :permission="permission"/>
    <!--表单组件-->
    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="id" prop="id">
          <el-input v-model="form.id" style="width: 370px;"/>
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="form.name" style="width: 370px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="id">
          <template slot-scope="scope">
            {{ dict.label.dept_status[scope.row.id] }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="name">
          <template slot-scope="scope">
            {{ dict.label.user_status[scope.row.name] }}
          </template>
        </el-table-column>
        <el-table-column v-permission="['admin','test2:edit','test2:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination/>
  </div>
</div>
</template>

<script>
  import crudTest2 from '@/api/test2'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'

  const defaultForm = {
  id:
  null,
name:
  null  }
  export default {
    name: 'Test2',
    components: {pagination, crudOperation, rrOperation, udOperation},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['dept_status', 'user_status'],
    cruds() {
      return CRUD({ title: 'testCpntroller', url: 'api/test2', sort: 'id,desc', crudMethod: { ...crudTest2 }})
    },
    data() {
      return {
        permission: {
          add: ['admin', 'test2:add'],
          edit: ['admin', 'test2:edit'],
          del: ['admin', 'test2:del']
        },
        rules: {
      id:
      [
        {required: true, message: '不能为空', trigger: 'blur'}
      ]    },
      queryTypeOptions: [
        {
          key: 'id',
          display_name: 'id'
        }, 
        {
          key: 'name',
          display_name: 'name'
        }
      ]
    }
    },
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        const query = this.query
        if (query.type && query.value) {
          this.crud.params[query.type] = query.value
        }
        return true
      }
    }
  }
</script>
<style scoped>
</style>
